<template>
  <div class="menu">
    <ul>
      <li 
        v-for="item in menuList" 
        :key="item.id" 
        :class="{ active: currentMenu === item.id }"
        @click="handleMenuClick(item.id)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    currentMenu: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleMenuClick(id) {
      this.$emit('menu-change', id); // 触发菜单切换事件
    }
  }
};
</script>

<style scoped>
.menu {
  width: 200px;
  float: left;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 10px;
  cursor: pointer;
}
li.active {
  background-color: lightblue;
  color: white;
}
</style>